<template>
  <section class="section">
    <h2 class="section-title">联系我们</h2>
    <div class="contact-content">
      <div class="contact-info">
        <h3>联系方式</h3>
        <div class="info-item">
          <h4>公司地址</h4>
          <p>北京市朝阳区未来科技大厦18层</p>
        </div>
        <div class="info-item">
          <h4>联系电话</h4>
          <p>+86 010-12345678</p>
        </div>
        <div class="info-item">
          <h4>电子邮箱</h4>
          <p>info@company.com</p>
        </div>
        <div class="info-item">
          <h4>工作时间</h4>
          <p>周一至周五 9:00-18:00</p>
        </div>
      </div>
      <div class="contact-map">
        <img src="https://shuigu-agent-rag.oss-cn-guangzhou.aliyuncs.com/kroki/mermaid/vKGTwOMI.svg" alt="公司位置地图" @error="handleImageError">
      </div>
    </div>
  </section>
</template>

<script setup>
// 联系我们页面
const handleImageError = (event) => {
  event.target.src = 'https://images.pexels.com/photos/3184454/pexels-photo-3184454.jpeg?auto=compress&cs=tinysrgb&h=400'
}
</script>

<style scoped>
.contact-content {
  display: flex;
  gap: 2rem;
  align-items: center;
}

.contact-info {
  flex: 1;
}

.contact-info h3 {
  margin-bottom: 1.5rem;
  color: #2c3e50;
}

.info-item {
  margin-bottom: 1.5rem;
}

.info-item h4 {
  margin-bottom: 0.5rem;
  color: #3498db;
}

.info-item p {
  font-size: 1.1rem;
  color: #666;
}

.contact-map {
  flex: 1;
}

.contact-map img {
  width: 100%;
  border-radius: 8px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

@media (max-width: 768px) {
  .contact-content {
    flex-direction: column;
  }
}
</style>